<!-- background 背景颜色

 -->
<template>
	<view class="container" :style="{'background':background}" @click="toDetail(item.serialNo)">
		<!-- 封面 -->
		<view class="cover">
			<image :style="imgStyle" :src="item.preview || item.metadataImage" mode=""></image>
		</view>
		<!-- info -->
		<view class="info">
			<!-- 标题  nft标题-->
			<view class="title" :style="{'color':nftNameColor}">
				<!-- 主题取值 goodsName -->
				<view class="goodsName">{{ item.goodsName || item.themeName }}</view>
				<!-- 类型 -->
				<view class="typeId">{{handleNftType}}</view>
			</view>
			<!-- 主题展示 -->
			<!-- 	<view>
				<view class="shop">
					发行量 <text class="circulation">{{ item.inventory }}</text>份
				</view>
				<view class="price">
					<view>价格</view>
					<view>
						¥ <text class="price_num">{{ item.price }}</text>元
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 数据
			item: {
				type: Object
			},
			imgStyle:{
				type: String,
				default: "width: 165px; heght:165px"
			},
			// 样式
			background: {
				type: String,
				default: 'rgba(255,255,255,0.1)',
			},
			// 标题颜色
			nftNameColor: {
				type: String,
				default: '#fff',
			},
		},
		data() {
			return {

			};
		},
		computed: {
			// 处理NFT类型
			handleNftType() {
				switch (this.item?.contractProtocolCode) {
					case '1':
						return 'POAP'
						break
					case '2':
						return '门票'
						break
					case '3':
						return '徽章'
						break
					case '4':
						return '藏品'
						break
					case '5':
						return 'PASS卡'
						break
					case '6':
						return 'SBT'
						break
					case '7':
						return '证书'
						break
					default:
						return ''
				}
			}
		},
		methods: {
			toDetail(serialNo) {
				this.$emit("toDetail",serialNo)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;

		.cover {
			width: 100%;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			padding: 20rpx;
			color: #777;

			.title {
				font-weight: bold;
				color: #FFFFFF;
				display: flex;
				
				justify-content: space-between;
				align-items: center;

				.typeId {
					color: #777;
				}
				.goodsName{
					width: 120rpx;
					text-align: center;
					padding: 20rpx 0rpx;
					/*1.强制不换行*/
					white-space: nowrap;
					/*2.溢出隐藏*/
					overflow: hidden;
					/*3.超出部分用省略号表示*/
					text-overflow: ellipsis;
				}
			}

			.shop {
				padding: 10rpx 0 6rpx;

				.circulation {
					color: $echo-main-color;
					margin: 0 6rpx;
				}
			}

			.price {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #777;

				&_num {
					color: $echo-main-color;
					font-size: 32rpx;
					margin: 0 6rpx;
				}
			}
		}
	}
</style>
